/**
TODO: SessionID or RoomID
Pass the session id to server..
**/

define([
	"app/kinetic/kinetic-shape",
	"app/kinetic/kinetic-operation"
	], 
function (
	shape,
	operation
	) {

    return {
    	stage : null,
    	stageWidth : 970,
		stageHeight : 600,
    	layer : null,
		rect : null,
		alpha : 255,
    	initialPoint : {x:0,y:0},
    	editMode : false,
		shape : shape,
		operation : operation,
		creationGroup: null,
		shapeStack : new Array(5),
		stackIndex : 0,
		lastUndo : 0,
		lastCreation : null,
        init: function () {
			console.log('Init Kinetic..');
			App.kinetic.initStage();
			App.kinetic.initLayer();
			App.kinetic.stage.add(App.kinetic.layer);
		},
		
		setStageSize : function(size){
			//Fix Kinetic Stage Size, Zoom or Pan Event.
			//Trouble Desc : Drawing area tidak mengikuti size kertas yang ada pada canvas.
			var nameBrowser = App.setBrowserDetect();
			//alert(nameBrowser);
			if(nameBrowser == "FireFox" && false){ 
				zoom=$("#" + App.kineticCanvas).width()*1.0 / screen.availWidth;
				size.width = size.width*0.8/zoom;
				size.height = size.height*0.8/zoom;
			}else if(nameBrowser == "IE"){ 		
				var screen = document.frames.screen;
				var scaleMult = ( ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed() );
				// alert(scaleMult);
				//size.width = size.width*100/scaleMult;
				//size.height = size.height*100/scaleMult;
			}
			App.kinetic.stage.setWidth(size.width);
			App.kinetic.stage.setHeight(size.height);
			App.kinetic.layer.setWidth(size.width);
			App.kinetic.layer.setHeight(size.height);
			App.kinetic.rect.setWidth(size.width);
			App.kinetic.rect.setHeight(size.height);
			App.kinetic.lastCreation  = null;
		},
		
		setBGCanvas : function(src,size){
			var imageObj = new Image();
			imageObj.onload = function() {
				console.log("Set Background");
				var yoda = new Kinetic.Image({
				  image: imageObj,
				  width: size.width,
				  height: size.height
				});
			
				// add the shape to the layer
				App.kinetic.creationGroup.add(yoda);

				// add the layer to the stage
				//App.kinetic.stage.add(layer);
				App.kinetic.layer.draw();
			};
			imageObj.src = src;
			App.kinetic.lastCreation  = null;
		},
		
		initStage: function(){
			console.log('Init Kinetic Stage..');
			App.kinetic.stage = new Kinetic.Stage({
				container: App.kineticCanvas,
				width: App.kinetic.stageWidth,
				height: App.kinetic.stageHeight
			});
		},
		
		enterCreationMode : function(){
			
			App.kinetic.creationGroup = new Kinetic.Group({
				draggable: false
			});
			App.kinetic.layer.add(App.kinetic.creationGroup);
			App.kinetic.layer.draw();
		},
		
		endCreationMode : function(shouldSave){
			console.log(shouldSave);
			if(shouldSave)
				App.kinetic.renderCreationGroupToImage();
			if(App.kinetic.creationGroup!= null)
			{
				App.kinetic.creationGroup.hide();
				App.kinetic.creationGroup.remove();
				//App.kinetic.layer.remove(App.kinetic.creationGroup);
				App.kinetic.layer.draw();
			}
		},
		
		initLayer: function(){
			console.log('Init Kinetic Layer..');
			App.kinetic.layer = new Kinetic.Layer();
			App.kinetic.rect = new Kinetic.Rect({
				x:0,
				y:0,
				width:App.kinetic.stageWidth,
				height:App.kinetic.stageHeight
			});
			App.kinetic.layer.add(App.kinetic.rect);
			
			//Firman Notes - Android : Spesific Handler for android Drawing
			var touchEvent = "mousedown touchstart";
			if(navigator.userAgent.match(/Android/i))
				touchEvent = "mousedown";
			
			App.kinetic.layer.on(touchEvent, function(e) {
				var event = e;
				App.touchStartCanvas(event);
				if(App.dragMode){
					App.isDrag = true;
					if(App.creationMode){
						App.creationStartPoint = {x:e.layerX,y:e.layerY};
						if(App.creationType=='rect')
							App.creationObject = App.kinetic.shape.initRectForCreation(App.creationStartPoint);
						if(App.creationType=='circle')
							App.creationObject = App.kinetic.shape.initCircleForCreation(App.creationStartPoint);
						if(App.creationType=='pencil')
							App.creationObject = App.kinetic.shape.initPencilForCreation(App.creationStartPoint);
						if(App.creationType=='line')
							App.creationObject = App.kinetic.shape.initLineForCreation(App.creationStartPoint);
	
						App.kinetic.creationGroup.add(App.creationObject);	
						App.kinetic.lastCreation = App.creationObject;
						
						App.kinetic.shapeStack[App.kinetic.stackIndex] = App.creationObject;
						App.kinetic.lastUndo = 0;
						App.kinetic.stackIndex++;
					}else{
						console.log("App is not in creation mode : active first to edit");
					}
				}
				App.kinetic.layer.draw();
			});
			
			//Firman Notes - Android : Spesific Handler for android Drawing
			touchEvent = "mousemove touchmove";
			if(navigator.userAgent.match(/Android/i))
				touchEvent = "mousemove";
				
			App.kinetic.layer.on(touchEvent, function(e) {
				var event = e;
				App.touchMoveCanvas(event);
				if(!App.dragMode){
				
				}else{
					if(App.isDrag){
						if(App.creationMode){
							var point = {x:e.layerX,y:e.layerY};
							if(App.creationType=='rect')
								App.kinetic.shape.settingRectOnCreation(App.creationStartPoint, point ,App.creationObject);
							if(App.creationType=='circle')
								App.kinetic.shape.settingCircleOnCreation(App.creationStartPoint, point ,App.creationObject);
							if(App.creationType=='pencil')
								App.kinetic.shape.settingPencilOnCreation(point ,App.creationObject);
							if(App.creationType=='line')
								App.kinetic.shape.settingLineOnCreation(point ,App.creationObject);
								
							App.kinetic.layer.draw();
						}
					}
				}
			});
			
			//Firman Notes - Android : Spesific Handler for android Drawing
			touchEvent = "mouseup touchend";
			if(navigator.userAgent.match(/Android/i))
				touchEvent = "mouseup";
				
			App.kinetic.layer.on(touchEvent, function(e) {
				if(App.dragMode){
					App.isDrag = false;
					App.kinetic.layer.draw();
				}
				
			});
			
			$(App.kinetic.stage.getContainer()).click(function(e){
				if(App.dragMode){
					App.isDrag = false;
					App.kinetic.layer.draw();
				}
			});
		},
		
		undo : function(){
			
			if(App.kinetic.stackIndex>0){	
				console.log(App.kinetic.shapeStack);
				App.kinetic.shapeStack[App.kinetic.stackIndex-1].hide();
				App.kinetic.lastUndo++;
				App.kinetic.stackIndex--;
				App.kinetic.layer.draw();
			}
		},
		
		redo : function(){
			if(App.kinetic.lastUndo>0){
				App.kinetic.shapeStack[App.kinetic.stackIndex].show();
				App.kinetic.stackIndex++;
				App.kinetic.layer.draw();
			}
		},
		
		renderCreationGroupToImage : function(){
			App.kinetic.operation.renderGroupToImage(App.kinetic.creationGroup);
		}	
	}
});